{% extends 'myadmin/base.html' %}
{% block title %}
<title>Book-shop图书分类</title>
{% endblock %}

{% block con %}
<section class="wrapper">
    <!--overview start-->
    <div class="row">
        <div class="col-lg-8">
            <h3 class="page-header"><i class="fa fa-users"></i> 图书分类管理 </h3>
        </div>
    </div>

    <section class="panel">
        <header class="panel-heading">
            图书分类列表
        </header>
        <div class="panel-body">
            <a href="{% url 'myadmin_types_add' %}" class="btn btn-success" data-toggle="modal" href="#myModal">新增</a>
            <a class="btn btn-warning" data-toggle="modal" href="#myModal2">保存</a>
            <div class="btn-group pull-right">
                <input class="form-control" placeholder="搜索" type="text" name="keywords">
            </div>
        </div>
        <table class="table table-striped table-advance table-hover">
            <thead>
            <tr>
                <th> ID</th>
                <th> 分类名</th>
                <th> 所属父类</th>
                <th> path</th>
                <th class="btn-group" style="right:-170px;"> 操作</th>
            </tr>
            </thead>
            <tbody>
            {% for i in data %}
            <tr>
                <td>{{ i.id }}</td>
                <td>{{i.sb}}<span class="tname">{{ i.name }}</span></td>
                <td>{% if i.pid == 0 %}顶级分类{% else %}{{ i.pname}}{% endif %}</td>
                <td>{{i.path}}</td>

                <td>
                    <div class="btn-group" style="right:-150px;">
                        <a class="btn btn-info">编辑</a>
                        <a class="btn btn-danger"><i class="ico_close_alt">删除</i></a>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <ul class="pagination pull-right">
            {% load pagetag %}
            <!-- 使用自定义分页标签 -->
            {% showpage data.paginator.num_pages request %}
        </ul>
    </section>
</section>

<script src="/static/myadmin/assets/js/jquery-1.12.4.min.js"></script>
<script>
      // 绑定事件
      $('.tname').dblclick(function(){
        // 获取name
        tname = $(this).text()
        $this = $(this)
        $this.unbind('dblclick')
        //创建一个input
        inp = $('<input type="text" value=" '+tname+' " style="color:black;" >')
        // 把input进入到span
        $(this).html(inp)
        inp.select()

        inp.blur(function(){
          newname = $(this).val()
          if(newname == tname){
            $this.text(tname)
          }else{
            id = $this.parents('tr').find('td:first').text()
            $.get("{% url 'myadmin_types_edit' %}",{'id':id,'name':newname},function(data){

              if(data['code']==0){
                $this.text(newname)
                shomwsg(data['msg'],true)
              }else{
                $this.text(tname)
                shomwsg(data['msg'],false)
              }
            },'json')
          }
        })

      })


      
      $(".ico_close_alt").click(function(){
        // 获取当前的数据id
        id = $(this).parents('tr').find('td:first').text()
        a = $(this)
        // 发送Ajax请求到后台
        $.get("{% url 'myadmin_types_delete' %}",{'id':id},function(data){
          if (data['code'] == 0){
            a.parents('tr').remove()
          }
          alert(data['msg'])
        },'json')
      });



</script>
{% endblock %}